<template>
    <div>
        <h3>书友汇</h3>
        <mineReturn title="书友汇" />
        <ul>
            <li v-for="item in data" :key="item.id">

                <van-cell :title="item.name" icon="user-circle-o" size="large" fontSize="20px" >
                    <!-- <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /> -->
                    <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                    <template #right-icon>
                        <button name="search" class="search-icon" v-if="!item.select">邀请安装</button>
                        <div v-if="item.select" font-size="20px">已加入</div>
                    </template>
                </van-cell>
            </li>
        </ul>
    </div>
</template>

<script>
import { friendApi } from "@/api/mineApi"
export default {
    data() {
        return {
            data: []
        }
    },
    async created() {
        let a = await friendApi()
        console.log(a)
        this.data = a
    },
   
}
</script>

<style lang="scss" scoped>
button {
    width: 80px;
    height: 30px;
    border-radius: 20px;
    background-color: white;
    border: 1px solid green;
    color: green;
}

.van-cell--large .van-cell__title {
    font-size: 20px;
}

.van-cell__left-icon, .van-cell__right-icon {
    height: 24px;
    font-size: 30px;
    line-height: 24px;
}
</style>